<!-- 
该组件是表格组件的头部区域 
主要用到的props有:
showTop：是否显示顶部区域 类型：布尔值
showBottom：是否显示底部区域 类型：布尔值
columns：存放一个对象数组，每个对象中存放着表头名name,与显示与否show 类型：数组
layout：字符串 决定着表格顶部右边功能按钮的显示隐藏 类型：字符串
-->
<template>
  <div class="table-bar">
    <!-- 底部区域 -->
    <div class="bottom-wrap" v-if="showBottom">
      <div class="left-wrap">
        <slot name="bottom"></slot>
      </div>
      <!-- 右边功能按钮 -->
      <div class="right-wrap">
        <el-button-group>
          <!-- 重置按钮 -->
          <el-button icon="el-icon-refresh-right" @click="refresh()" size="small"
            v-if="layout.indexOf('refresh') !== -1" />
          <!-- 下拉菜单 选择要显示的表头内容 -->
          <el-popover placement="bottom-end" width="150" trigger="hover" @show="showPopover"
            v-if="layout.indexOf('column') !== -1">
            <el-checkbox-group v-model="colOptions" :min="1">
              <el-checkbox v-for="(item, index) in colSelect" :label="item" :key="item"
                @change="changeColumn($event, index)" />
            </el-checkbox-group>
            <el-button size="small" slot="reference" icon="el-icon-s-operation" />
          </el-popover>
        </el-button-group>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'OperationTableBar',
    inject: ["reload"],
    props: {
      // 是否显示顶部区域
      // showTop: {
      //     type: Boolean,
      //     default: false
      // },
      // 是否显示底部区域
      showBottom: {
        type: Boolean,
        default: true
      },
      // 存放表头的内容的数组 数组里是对象 对象里存放的每一项表头名称和show（显示与否）
      columns: {
        type: Array,
        default: () => []
      },
      // 右边功能按钮的显示，默认是三个都显示
      layout: {
        type: String,
        default: 'refresh, column'
      }
    },
    data() {
      return {
        colOptions: [],
        colSelect: [],
        columnChage: false
      }
    },
    mounted() {},
    methods: {
      // 刷新页面
      refresh() {
        this.reload()
      },
      // 列的显示隐藏
      showPopover() {
        if (!this.columnChage) {
          let ops = []
          this.columns.map(item => {
            ops.push(item.name)
          })
          this.colOptions = ops
          this.colSelect = ops
          this.columnChage = true
        }
      },
      // 选择列
      changeColumn(show, index) {
        let columns = this.columns
        columns.map((item, i) => {
          if (index === i) {
            item.show = show
          }
        })
        // 调用父组件方法 并传递columns 父组件要有一个方法changeColumn来接收
        this.$emit('changeColumn', columns)
      }
    }
  }

</script>

<style lang="scss" scoped>
  .table-bar {
    padding-bottom: 15px;

    .bottom-wrap {
      display: flex;
      justify-content: space-between;
    }
  }

</style>
